<template>
    <div class="course">
        <div id="course-header" class="topbox cl">
            <div class="topm cl">
                <h1 style="padding-top: 0;padding-bottom: 5px">{{courses.courseName}}<i @click="editCourseVisible = true" style="font-size: 24px; margin-left: 15px" class="el-icon-edit-outline" /></h1>
                <h2>{{courses.courseClass}}</h2>
                <div class="box-box">
                    <div class="sele">
                        <div class="codetext">加课码：{{courses.courseCode}}</div>
                    </div>
                    <div class="sele">
                        <div class="codetext"><i class="el-icon-user-solid" />&nbsp;成员&nbsp;{{this.membersCount}}</div>
                    </div>
                    <div class="coursedatabox" style="float: right">
                        <div class="coursedata">
                            <ul>
                                <li style="display:block">{{workCount}}</li>
                                <li>发布作业</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-menu class="course-menu" :default-active="$route.path" mode="horizontal">
            <el-menu-item class="menu-item" index="/teacher/course"><p class="line-height: 72px">作业</p></el-menu-item>
        </el-menu>
        <div class="homework-page">
            <div class="width980 clearfix">
                <div class="cWidth-title">
                    <div class="send-an active">
                        <a @click="cerateWorkVisible = true" class="active">发布个人作业</a>
                    </div>
                </div>
            </div>
            <!--有内容-->
            <div class="homework-cont width980 editor-page" v-if="workDTOs.length>0">
                <div class="homework-list clearfix">
                    <div class="homework-box" v-for="workDTO in workDTOs" v-bind:key="workDTO.aid">
                        <div class="announce-cont-box">
                            <div class="title clearfix">
                                <div class="work-type fl">
                                    <span>个人作业</span>
                                    <span>{{workDTO.assignmentStart}}</span>
                                </div>
                                <div class="opt">
                                    <el-dropdown trigger="click" @command="workOperation">
                                        <a style="font-size: 34px"><i class="el-icon-more" /></a>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item :command="composeValue(workDTO ,1)"><a>编辑</a></el-dropdown-item>
                                            <el-dropdown-item :command="composeValue(workDTO ,2)">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                            <div class="announce-cont clearfix" style="margin-bottom: 10px; position: relative; clear: left">
                                <div class="work-new-r fr">
                                    <div class="total-cont">
                                        <p @click="jumpToWork(workDTO)" class="score">
                                            <a>{{workDTO.isCheckCount}}</a>
                                            <a class="green">已批</a>
                                        </p>
                                        <p @click="jumpToWork(workDTO)" class="score">
                                            <a>{{workDTO.noCheckCount}}</a>
                                            <a class="grey">未批</a>
                                        </p>
                                        <p @click="jumpToWork(workDTO)" class="score">
                                            <a>{{workDTO.noHandinCount}}</a>
                                            <a class="red">未交</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="work-new-l" style="margin-right:340px;">
                                    <h3 class="work-title"><a @click="jumpToWork(workDTO)">{{workDTO.assignmentName}}</a></h3>
                                    <div class="word">
                                        <div class="p">{{workDTO.assignmentDesc}}</div>
                                    </div>
                                </div>

                            </div>
                            <div class="comment-new">
                                <p>截止日期：{{workDTO.assignmentEnd}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          <div class="homework-cont width980 editor-page no_work" v-else>
            您还未发布作业
          </div>
        </div>
        <!-- 修改课程 -->
        <el-dialog
            title="修改课程"
            :visible.sync="editCourseVisible"
            style="text-align: left; margin-top: 100px"
            width="35%"
            :before-close="handleClose"
            left>
            <div :model="newCourse">
                <div class="input-box">
                    <span>课程名称：</span>
                    <input v-model="newCourse.courseName" type="text" :placeholder="courses.courseName">
                </div>
                <div class="input-box" style="margin-top:20px">
                    <span>班级名称：</span>
                    <input v-model="newCourse.courseClass" type="text" :placeholder="courses.courseClass">
                </div>
                <div class="yearbox">
                    <div>学期：</div>
                    <el-select v-model="newCourse.courseYear" :placeholder="courses.courseYear">
                        <el-option
                        v-for="item in academic_year"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="newCourse.courseTerm" :placeholder="courses.courseTerm" style="margin-left: 50px">
                        <el-option
                        v-for="item in semester"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="editCourseVisible = false" style="margin-right: 20px">取 消</el-button>
                <el-button type="primary" @click="editCourse()" style="margin-right: 40px">修 改</el-button>
            </span>
        </el-dialog>
        <!-- 发布个人作业 -->
        <el-dialog
            title="发布个人作业"
            :visible.sync="cerateWorkVisible"
            style="text-align: left; margin-top: 100px"
            width="50%"
            :before-close="handleClose"
            left>
            <div :model="createWorkDTO">
                <div class="input-box">
                    <span>作业名称：</span>
                    <input v-model="createWorkDTO.assignmentName" type="text" placeholder="请输入作业名称">
                </div>
                <div class="input-box" style="margin-top:20px; height: 64px; border: 1px solid #ececec; border-radius: 4px">
                    <textarea v-model="createWorkDTO.assignmentDesc" rows="4" placeholder="作业简介，作业格式等要求" style="width: 100%; font-size: 14px; padding: 10px 15px; font-family: 'Avenir', Helvetica, Arial, sans-serif" />
                </div>
                <div class="yearbox">
                    <span>截止日期：</span>
                    <el-date-picker
                        v-model="createWorkDTO.assignmentEnd"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
                <div class="input-box" style="margin-top: 20px; width: 119px">
                    <span>满分值：</span>
                    <input v-model="createWorkDTO.fullScore" type="text" style="width: 50px">
                </div>
            </div>
            <span slot="footer">
                <el-button @click="cerateWorkVisible = false" style="margin-right: 20px">取 消</el-button>
                <el-button type="primary" @click="createWork()" style="margin-right: 40px">发布个人作业</el-button>
            </span>
        </el-dialog>
        <!-- 修改个人作业 -->
        <el-dialog
            title="修改个人作业"
            :visible.sync="editWorkVisible"
            style="text-align: left; margin-top: 100px"
            width="50%"
            :before-close="handleClose"
            left>
            <div :model="currentWorkDTO">
                <div class="input-box">
                    <span>作业名称：</span>
                    <input v-model="currentWorkDTO.assignmentName" type="text" placeholder="请输入作业名称">
                </div>
                <div class="input-box" style="margin-top:20px; height: 64px; border: 1px solid #ececec; border-radius: 4px">
                    <textarea v-model="currentWorkDTO.assignmentDesc" rows="4" placeholder="作业简介，作业格式等要求" style="width: 100%; font-size: 14px; padding: 10px 15px; font-family: 'Avenir', Helvetica, Arial, sans-serif" />
                </div>
                <div class="yearbox">
                    <span>截止日期：</span>
                    <el-date-picker
                        v-model="currentWorkDTO.assignmentEnd"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
                <div class="input-box" style="margin-top: 20px; width: 119px">
                    <span>满分值：</span>
                    <input v-model="currentWorkDTO.fullScore" type="text" style="width: 50px">
                </div>
            </div>
            <span slot="footer">
                <el-button @click="editWorkVisible = false" style="margin-right: 20px">取 消</el-button>
                <el-button type="primary" @click="editWork()" style="margin-right: 40px">修 改</el-button>
            </span>
        </el-dialog>
        <!-- 删除个人作业 -->
        <el-dialog
            title="确定要删除此次作业？"
            :visible.sync="dropWorkVisible"
            style="text-align: left; margin-top: 100px"
            width="20%"
            :before-close="handleClose"
            left>
            <span slot="footer">
                <el-button @click="dropWorkVisible = false" style="margin-right: 20px">取 消</el-button>
                <el-button type="primary" @click="dropWork()" style="margin-right: 40px">删 除</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCourseById, getCourseCount, getAssignmentLinkCourse, editCourseInfo, createAssignment, deleteAssignmentByAid, editAssignment } from '../../api/require'
export default {
  data () {
    return {
      tid: '',
      cid: '',
      aid: '',
      courses: {},
      newCourse: {},
      workDTOs: [],
      currentWorkDTO: {},
      workCount: {},
      createWorkDTO: {},
      membersCount: '',
      editCourseVisible: false,
      cerateWorkVisible: false,
      editWorkVisible: false,
      dropWorkVisible: false,
      academic_year: [{ value: '2016-2017', label: '2016-2017' }, { value: '2017-2018', label: '2017-2018' }, { value: '2018-2019', label: '2018-2019' }, { value: '2019-2020', label: '2019-2020' }],
      semester: [{ value: '第一学期', label: '第一学期' }, { value: '第二学期', label: '第二学期' }],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {
    jumpToWork (workDTO) {
      this.$router.push({ path: '/teacher/work', query: { aid: workDTO.aid, cid: this.cid, courseName: this.courses.courseName } })
    },
    dropWork () {
      this.dropWorkVisible = false
      deleteAssignmentByAid(this.currentWorkDTO.aid).then(res => {
        if (res.data.code === 200) {
          this.$message('删除作业成功！')
          getAssignmentLinkCourse(this.cid, -1).then(res => {
            console.log('课程的作业', res)
            this.workDTOs = res.data.obj
            this.workCount = this.workDTOs.length
          }).catch(err => {
            console.log(err)
          })
        }
      }).catch(err => {
        console.log(err)
        this.$message('删除作业失败！')
      })
    },
    editWork () {
      this.currentWorkDTO.startTime = this.getCurrentTime()

      this.currentWorkDTO.cid = this.courses.cid
      console.log('nimaya')
      editAssignment(this.currentWorkDTO).then(res => {
        console.log('创建作业', res)
        if (res.data.code === 200) {
          this.$message.success('修改作业成功')
        } else {
          this.$message.success('修改作业失败')
        }
        this.editWorkVisible = false
        getAssignmentLinkCourse(this.cid, -1).then(res => {
          console.log('课程的作业', res)
          this.workDTOs = res.data.obj
          this.workCount = this.workDTOs.length
        }).catch(err => {
          console.log(err)
        })
      }).catch(err => {
        console.log(err)
        this.$message.success('修改作业失败')
      })
    },
    composeValue (work, row) {
      return {
        work: work,
        row: row
      }
    },
    workOperation (command) {
      if (command.row === 1) {
        this.editWorkVisible = true
        this.currentWorkDTO = JSON.parse(JSON.stringify(command.work))
      } else {
        this.dropWorkVisible = true
        this.currentWorkDTO = command.work
      }
    },
    editCourse () {
      this.editCourseVisible = false

      this.newCourse.cid = this.cid
      editCourseInfo(this.newCourse).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success('修改课程信息成功!')
        } else {
          this.$message.error('修改课程信息失败!')
        }
        this.getCourse()
      }).catch(err => {
        console.log(err)
        this.$message.error('修改课程信息失败!')
      })
    },
    createWork () {
      this.createWorkDTO.startTime = this.getCurrentTime()

      this.createWorkDTO.cid = this.courses.cid

      createAssignment(this.createWorkDTO).then(res => {
        console.log('创建作业', res)
        if (res.data.code === 200) {
          this.$message.success('发布作业成功')
        } else {
          this.$message.success('发布作业失败')
        }
        this.cerateWorkVisible = false
        getAssignmentLinkCourse(this.cid, -1).then(res => {
          console.log('课程的作业', res)
          this.workDTOs = res.data.obj
          this.workCount = this.workDTOs.length
        }).catch(err => {
          console.log(err)
        })
      }).catch(err => {
        console.log(err)
        this.$message.success('发布作业失败')
      })
      // this.$axios.post('api/work/saveWork', this.createWorkDTO)
      //   .then(res => {
      //     console.log(res)
      //     this.$message('发布作业成功！')
      //   })
      //   .catch(err => {
      //     console.log(err)
      //     this.$message('发布作业失败！')
      //   })
    },

    getCurrentTime () {
      const date = new Date()
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getCourse () {
      getCourseById(this.cid).then(res => {
        console.log(res)
        this.courses = res.data.obj
      }).catch(err => {
        console.log(err)
      })
    }
  },

  mounted () {
    console.log('sidadadoa', this.$route)
    this.tid = this.$route.query.tid
    this.cid = this.$route.query.cid
    this.courseName = this.$route.query.courseName
    this.courseClass = this.$route.query.courseClass

    this.getCourse()
    getCourseCount(this.cid).then(res => {
      console.log('人数', res)
      this.membersCount = res.data.obj.length
    }).catch(er => {
      console.log(er)
    })
    getAssignmentLinkCourse(this.cid, -1).then(res => {
      console.log('课程的作业', res)
      this.workDTOs = res.data.obj
      this.workCount = this.workDTOs.length
    }).catch(err => {
      console.log(err)
    })

    // const cId = this.$route.query.cId
    // this.tId = this.$route.query.tId
    // this.$axios.get('api/course/getCourseById?id=' + cId)
    //   .then(res => {
    //     this.course = res.data
    //     this.newCourse = JSON.parse(JSON.stringify(this.course))
    //   })
    // this.$axios.get('api/course/getTeacherWorksByCId?cId=' + cId)
    //   .then(res => {
    //     this.workDTOs = res.data
    //     this.workCount = this.workDTOs.length
    //   })
    // this.$axios.get('api/course/getStudentsCountByCId?cId=' + cId)
    //   .then(res => {
    //     this.membersCount = res.data
    //   })
  }

}
</script>

<style scoped>
    a {
        text-decoration: none;
        outline: 0;
    }
    li {
        list-style: none;
    }
    .fl {
        float: left;
    }
    body {
        font-size: 14px;
        font-family: 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
        background: #fff;
        color: #2d2d2d;
    }
    .course {
        margin: 0 auto;
    }
    .topbox, .topm .box-box, .topm .sele {
        position: relative;
    }

    .topbox {
        margin: 30px auto 0;
        width: 1224px;
        background-size: cover;
        height: 200px;
        border-radius: 8px 8px 0 0;
        padding: 10px 0 0 40px;
        box-sizing: border-box;
        background: url("../../assets/images/bg.png") no-repeat;
      background-size: cover;
    }
    .topm ul li {
        margin-left: 10px;
        position: relative;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    .topm h1 {
        text-align: left;
        padding-top: 22px;
        font-size: 36px;
        color: #fff;
    }
    .topm h2 {
        text-align: left;
        font-size: 20px;
        font-family: PingFang SC;
        color: rgba(255,255,255,1);
        line-height: 28px;
        width: 600px;
    }
    .topm h1, .topm h2 {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topm .box-box {
        height: 35px;
        margin: 20px auto 0;
    }
    .topm .sele {
        float: left;
        font-size: 15px;
        color: #fff;
        text-align: left;
        height: 24px;
        line-height: 24px;
        background-position: 100px 10px;
        background-size: 14px auto;
        cursor: pointer;
        user-select: none;
        background: rgba(255,255,255,.4);
        border-radius: 2px;
        padding: 0 10px;
        margin-right: 20px;
    }
    .topm .sele .codetext {
        font-size: 12px;
    }
    .coursedatabox .coursedata {
        margin-right: 30px;
    }
    .coursedatabox .coursedata ul {
        margin-top: -50px;
    }
    .coursedatabox .coursedata ul li:first-of-type {
        font-size: 40px;
        line-height: 48px;
        height: 50px;
    }
    .coursedata ul li+li, .coursedatabox .coursedata ul li:first-of-type, .noopened-vip>i {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255,255,255,1);
    }
    .course-menu {
        width: 1224px;
        height: 72px;
        padding: 0 4%;
        box-sizing: border-box;
        background: rgba(241,243,244,1);
        border-radius: 0 0 8px 8px;
        margin: 0 auto;
    }
    .menu-item {
        margin-right: 32px;
    }
    .el-menu--horizontal>.el-menu-item {
        float: left;
        height: 72px;
        line-height: 72px;
        margin: 0;
        border-bottom: 2px solid transparent;
        color: #909399;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
        border-bottom: 2px solid #409EFF;
        background-color: #fff;
        color: #303133;
    }
    .cWidth-title {
        width: auto;
        height: auto;
        padding-top: 40px;
        overflow: hidden;
    }
    .send-an {
        width: 136px;
        border: 1px solid #32BAF0;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        text-align: center;
        background: #FFF;
        margin-right: 16px;
        float: left;
    }
    .send-an a {
        font-size: 14px;
        color: #32BAF0;
        display: block;
        cursor: pointer;
    }
    .homework-page {
        padding-bottom: 60px;
    }
    .homework-cont {
        margin-top: 20px;
    }
    .homework-page .width980 {
        width: 1224px;
        margin-left: auto;
        margin-right: auto;
    }
    .empty-box .box {
        width: 1224px;
        height: auto;
        background: #F1F3F4;
        border-radius: 4px;
        margin-top: 42px;
        text-align: center;
        padding: 35px 0;
        margin-left: auto;
        margin-right: auto;
    }
    .empty-box .box h3 {
        font-size: 14px;
        color: #707070;
        font-weight: 400;
        margin-bottom: 5px;
    }
    .empty-box .box p {
        color: #A0A0A0;
        font-size: 14px;
        line-height: 24px;
    }
    .clearfix {
        zoom: 1;
    }
    .homework-cont .homework-list .homework-box {
        padding: 0 20px 0 40px;
        border: 1px solid #E2E6ED;
        border-radius: 8px;
        background: #FFF;
        margin-bottom: 20px;
    }
    .homework-cont .homework-list .work-new-r .total-cont p {
        font-size: 0;
        line-height: 20px;
        text-align: center;
        float: left;
    }
    .homework-cont .homework-list .work-new-r .total-cont p a {
        display: block;
        min-width: 80px;
        padding-left: 15px;
        color: #707070;
        padding-right: 15px;
    }
    .homework-cont .homework-list .work-new-r .total-cont p a:first-child {
        font-size: 30px;
        height: 44px;
        line-height: 44px;
    }
    .homework-cont .homework-list .work-new-r .total-cont p a:last-child {
        font-size: 14px;
        height: 26px;
        line-height: 26px;
    }
    .homework-page .homework-cont .homework-list .homework-box .announce-cont-box {
        padding: 0 30px 20px 0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .title .work-type {
        padding: 21px 0 0;
    }
    .announce-cont-box .title .work-type {
        color: #AAA;
        font-size: 0;
        padding: 21px 0 10px;
        line-height: 30px;
        text-align: left;
    }
    .announce-cont-box .title .work-type span:first-child {
        color: #5F6368;
        background: #F1F3F4;
        padding: 3px 5px;
        border-radius: 2px;
    }
    .announce-cont-box .title .work-type span {
        font-size: 14px;
        margin-right: 15px;
        color: #5F6368;
    }
    .announce-cont-box .title .opt {
        float: right;
        width: 34px;
        height: 34px;
        margin-right: -20px;
        position: relative;
    }
    .announce-cont-box .title .opt .opt-btn {
        display: block;
        width: 34px;
        height: 34px;
        border-radius: 3px;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-l {
        text-align: left;
        height: auto;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-title a {
        line-height: 38px;
        padding-bottom: 0;
    }
    .announce-cont-box .work-title a {
        display: inline-block;
        color: #3B3D45;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        padding-bottom: 5px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .announce-cont-box .announce-cont .word .p, .announce-cont-box .announce-cont .work-time {
        color: #707070;
        overflow: hidden;
        line-height: 1.8;
    }
    .homework-page .announce-cont-box .announce-cont .annex, .homework-page .announce-cont-box .announce-cont .word {
        height: auto;
        overflow: auto;
        max-height: inherit;
    }
    .announce-cont-box .announce-cont .annex {
        max-height: 110px;
        margin-top: 10px;
        overflow: hidden;
    }
    .announce-cont-box .announce-cont .annex li {
        width: 92px;
        float: left;
        text-align: center;
        height: 110px;
        margin-right: 40px;
        margin-bottom: 10px;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r a.sc-btn {
        background: #32BAF0;
    }
    .homework-cont .homework-list .homework-box .announce-cont-box .work-new-r>a {
        float: right;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #FFF;
        border-radius: 4px;
        font-size: 14px;
    }
    .comment-new {
        height: 20px;
        line-height: 20px;
    }
    .comment-new p {
        padding-right: 10px;
    }
    .comment-new a, .comment-new p {
        float: left;
        margin-right: 20px;
        color: #A0A0A0;
    }
    .comment-new p b {
        font-weight: 400;
        margin-left: 10px;
    }
    .input-box {
        margin-top: -10px;
        height: 38px;
        border-bottom: 1px solid #ececec;
        box-sizing: border-box;
    }
    .input-box span {
        height: 38px;
        line-height: 38px;
        display: inline-block;
        vertical-align: middle;
        color: #2D2D2D
    }
    .input-box input, .pop-new-2 .input-box-v2 input {
        display: inline-block;
        vertical-align: middle;
        height: 38px;
        width: 260px;
        font-size: 14px;
    }
    input, select, textarea {
        outline: 0;
        border: none;
        background: 0 0;
        cursor: text;
    }
    .yearbox {
      display: flex;
        justify-content: space-between;
      align-items: center;
        margin-top: 20px;
        cursor: pointer;
    }
    .no_work{
      height: 100px;
      width: 70%;
      margin: 0 auto;
      background: #262e4a;
      border-radius: 10px;
      color: #fff;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 100px;
    }
</style>
